<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          v-model:value="adminName"
          placeholder="根据账户查询"
          style="width: 200px"
          @search="onSearch"
        />
        <a-button
          style="margin: 0 10px"
          @click="$refs.addManager.visible = true"
        >
          新增管理
        </a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="username" title="账号"></vxe-table-column>
      <vxe-table-column field="userNickname" title="姓名"></vxe-table-column>
      <vxe-table-column title="头像">
        <template #default="{ row }">
          <a-avatar :src="row.userAvatar" />
        </template>
      </vxe-table-column>

      <vxe-table-column title="角色">
        <template #default="{ row }">
          <a-button type="link">{{ row.srRole.roleDesc }}</a-button>
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column title="所在仓库">
        <template #default="{ row }">
          <a-button type="link">
            {{ row.storehouseInfo.srName }}/{{ row.storehouseInfo.srSite }}
          </a-button>
        </template>
      </vxe-table-column> -->
      <vxe-table-column field="lastLoginTime" title="最后登陆时间" width="250">
        <template #default="{ row }">
          {{ tenBitTimestamp(row.lastLoginTime) }}
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" width="150">
        <template #default="{ row }">
          <a-button type="primary" shape="circle" ghost @click="editor(row)" style="margin-right:10px;">
            <i class="iconfont icon-bianji"></i>
          </a-button>

          <a-popconfirm
            title="确定删除该管理?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteAdmin(row)"
          >
            <a-button type="danger" shape="circle" ghost>
              <i class="iconfont icon-shanchu"></i>
            </a-button>
          </a-popconfirm>
        </template>
      </vxe-table-column>
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />

    <!-- 新增管理员弹窗 -->
    <add-manager ref="addManager" />
  </div>
</template>

<script>
import { getManagerList, deleteAdmin } from '@/api/manager'
import AddManager from './components/add-manager'
import { thirteenBitTimestamp } from '@/utils/index'
export default {
  components: {
    AddManager,
  },
  data() {
    return {
      allAlign: 'center',
      // 管理员数据
      tableData: [],
      ApiData: {
        adminName: '',
        pageNum: 1,
        pageSize: 10,
        type: 0,
      },
      // 数据总条数
      totalNum: 0,
      adminName: '',
    }
  },
  created() {
    this.managerList()
  },
  watch: {
    adminName: {
      handler(newV, oldV) {
        if (newV === '') {
          this.ApiData.type = 0
          this.managerList()
        }
      },
      immediate: true,
    },
  },
  methods: {
    /**
     * 删除管理员
     */
    deleteAdmin(info) {
      deleteAdmin(info.id).then((res) => {
        this.managerList()
        this.$message.success('删除成功')
      })
    },
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.managerList()
    },
    /**
     * 获取管理员列表
     */
    managerList() {
      getManagerList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.totalNum = res.queryResult.total
      })
    },
    /**
     * 编辑
     */
    editor(info) {
      console.log(info)
      var editorData = {
        id: info.id,
        role: info.srRole.id,
        password: null,
        storeHoseId: '',
        userAvatar: info.userAvatar,
        userNickname: info.userNickname,
        username: info.username,
      }
      this.$refs.addManager.apiData = editorData
      // 代表编辑
      this.$refs.addManager.isEditor = true
      this.$refs.addManager.visible = true
      console.log(info)
    },
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    /**
     * 条件查询 用户信息
     */
    onSearch() {
      this.ApiData.type = 1
      this.ApiData.adminName = this.adminName
      this.managerList()
    },
  },
}
</script>

<style lang="less" scoped>
</style>